<template>
	<view class="frame">
		<view class="top_nav_box">
			<navigation-custom :config="config" @customConduct="customConduct" />
		</view>
		<view class="content_hadrimg">
			<image :src="imgUrl+'shujubaiojiao.png'" mode="aspectFill"></image>
			<view style="width: 100%;background-color: #F5F7FB !important;">
				<view class="sadagfaadas">
					<image :src="imgUrl+'asjkhdakjdadad.png'" mode="" class="sadadada"></image>
					<view :class="cayunList.length > 0 ?'asdsda':'asdsdas' ">

					</view>
					<view class="asndaisasfa">
						<view class="namrdadadad" v-if="typeq == 1">
							V整形现场咨询排行榜
						</view>
						<view class="namrdadadad" v-if="typeq == 2">
							临沂卫康网电咨询排行榜
						</view>
						<view class="namrdadadad" v-if="typeq == 3">
							苏州卫康现场咨询排行榜
						</view>
						<view class="tabbangdan">
							<view :class="oneindex == 0 ?'yuebang':'yuebangs'" @click="getonetob(0)">
								月榜
							</view>
							<view :class="oneindex == 1 ?'yuebang':'yuebangs'" @click="getonetob(1)">
								季榜
							</view>
							<view :class="oneindex == 2 ?'yuebang':'yuebangs'" @click="getonetob(2)">
								年榜
							</view>
						</view>
						<view v-if="oneindex == 0">
							<view class="bangdansd">
								<view class="onessd">
									<image :src="imgUrl+'guansdad.png'" mode="" class="jinns"></image>
									<view class="touxiang">
										<view class="touxiagsdass">
											<image
												:src="dier.avatar == null ? 'https://star.googom.cn/image/nanshengtouxiang.png' : dier.avatar"
												mode="aspectFill" class="cehsitouxi"></image>
											<view class="name">
												{{dier.nickname == '' || dier.nickname == undefined ? '虚位以待' : dier.nickname}}
											</view>
											<view class="yeji">
												{{dier.score_title == '' || dier.score_title == undefined ? '暂无' : dier.score_title}}顾问
											</view>
										</view>
									</view>
								</view>
								<view class="onessd">
									<image :src="imgUrl+'guanysunada.png'" mode="" class="jinn"></image>
									<view class="touxiangs">
										<view class="touxiagsdass">
											<image
												:src="diyi.avatar == null ? 'https://star.googom.cn/image/nanshengtouxiang.png' : diyi.avatar"
												mode="aspectFill" class="cehsitouxi"></image>
											<view class="asdasasadasda">
												<view class="name">
													{{diyi.nickname == '' || diyi.nickname == undefined ? '虚位以待' : diyi.nickname}}
												</view>
												<view class="yeji">
													{{diyi.score_title == '' || diyi.score_title == undefined ? '暂无' : diyi.score_title}}顾问
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="onessd">
									<image :src="imgUrl+'difanasd.png'" mode="" class="jinnss"></image>
									<view class="touxiaada">
										<view class="touxiagsdass">
											<image
												:src="disan.avatar == null ? 'https://star.googom.cn/image/nanshengtouxiang.png' : disan.avatar"
												mode="aspectFill" class="cehsitouxi"></image>
											<view class="name">
												{{disan.nickname == '' || disan.nickname == undefined ? '虚位以待' : disan.nickname}}
											</view>
											<view class="yeji">
												{{disan.score_title == '' || disan.score_title == undefined ? '暂无' : disan.score_title}}顾问
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="assfasfas">
								<view class="bangdan" v-for="(itemss,indexss) in cayunList" :key="indexss">
									<view :class=" itemss.is_my == 0 ? 'shujusda':'shujusdas'">
										<view class="aasdadadasdad">
											<view class="banagba_cloumn">
												<view class="banagba_clyio">
													TOP
												</view>
												<view class="banagba_clyios">
													{{itemss.rank}}
												</view>
											</view>
											<image
												:src="itemss.avatar == null ? 'https://star.googom.cn/image/nanshengtouxiang.png' : itemss.avatar"
												mode="aspectFill" class="tsasdad"></image>
											<view class="baname">
												{{itemss.nickname == '' || itemss.nickname == undefined ? '虚位以待' : itemss.nickname}}
											</view>
											<view class="basdadf" v-if="itemss.is_diff_top == 'up'">
												<image :src="imgUrl+'shangdada.png'" mode="aspectFill"
													class="shangsfhasd">
												</image>
												<view class="shuzi">
													{{itemss.is_diff_num}}
												</view>
											</view>
											<view class="basdadf" v-if="itemss.is_diff_top == 'down'">
												<image :src="imgUrl+'xiaiangdad.png'" mode="aspectFill" class="shangsfhasd">
												</image>
												<view class="shuzi">
													{{itemss.is_diff_num}}
												</view>
											</view>
										</view>
										<view class="yeji_cluiom">
											<view class="yeji_namke">
												{{itemss.score_title == '' || itemss.score_title == undefined ? '暂无' : itemss.score_title}}顾问
											</view>
											<view class="yeji_pices" v-if="itemss.top_one != 0">
												距升星还差{{itemss.top_one}}业绩
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view v-if="oneindex == 1 || oneindex == 2">
							<view class="bangdansd">
								<view class="onessd">
									<image :src="imgUrl+'guansdad.png'" mode="" class="jinns"></image>
									<view class="asdadadad">
										<view class="touxiagsdass">
											<image
												:src="dier.avatar == null ? 'https://star.googom.cn/image/nanshengtouxiang.png' : dier.avatar"
												mode="aspectFill" class="cehsitouxi"></image>
											<view class="name">
												{{dier.nickname == '' || dier.nickname == undefined ? '虚位以待' : dier.nickname}}
											</view>
											<view style="margin-top: 92rpx;">
												<view v-for="(item,index) in dier.total" :key="index">
													<view class="yejias">
														{{item.score_title}}<text>{{item.total}}</text>次
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="onessd">
									<image :src="imgUrl+'guanysunada.png'" mode="" class="jinn"></image>
									<view class="asasdsdasc">
										<view class="touxiagsdass">
											<image
												:src="diyi.avatar == null ? 'https://star.googom.cn/image/nanshengtouxiang.png' : diyi.avatar"
												mode="aspectFill" class="cehsitouxi"></image>
											<view class="asdasasadasda">
												<view class="name">
													{{diyi.nickname == '' || diyi.nickname == undefined ? '虚位以待' : diyi.nickname}}
												</view>
												<view style="margin-top: 106rpx;">
													<view v-for="(item,index) in diyi.total" :key="index">
														<view class="yejiass">
															{{item.score_title}}<text>{{item.total}}</text>次
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="onessd">
									<image :src="imgUrl+'difanasd.png'" mode="" class="jinnss"></image>
									<view class="sadadadadadadada">
										<view class="touxiagsdass">
											<image
												:src="disan.avatar == null ? 'https://star.googom.cn/image/nanshengtouxiang.png' : disan.avatar"
												mode="aspectFill" class="cehsitouxi"></image>
											<view class="name">
												{{disan.nickname == '' || disan.nickname == undefined ? '虚位以待' : disan.nickname}}
											</view>
											<view style="margin-top: 92rpx;">
												<view v-for="(item,index) in disan.total" :key="index">
													<view class="yejiasss">
														{{item.score_title}}<text>{{item.total}}</text>次
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="assfasfas">
								<view class="bangdans" v-for="(itemss,indexss) in cayunList" :key="indexss">
								<view :class=" itemss.is_my == 0  ? 'shujusda':'shujusdas'">
										<view class="aasdadadasdad">
											<view class="banagba_cloumn">
												<view class="banagba_clyio">
													TOP
												</view>
												<view class="banagba_clyios">
													{{itemss.rank}}
												</view>
											</view>
											<image
												:src="itemss.avatar == null ? 'https://star.googom.cn/image/nanshengtouxiang.png' : itemss.avatar"
												mode="aspectFill" class="tsasdad"></image>
											<view class="asdadkada">
												<view class="asdadkada_row">
													<view class="baname">
														{{itemss.nickname == '' || itemss.nickname == undefined ? '虚位以待' : itemss.nickname}}
													</view>
													<view class="basdadf" v-if="itemss.is_diff_top == 'up'">
														<image :src="imgUrl+'shangdada.png'" mode="aspectFill"
															class="shangsfhasd">
														</image>
														<view class="shuzi">
															{{itemss.is_diff_num}}
														</view>
													</view>
													<view class="basdadf" v-if="itemss.is_diff_top == 'down'">
														<image :src="imgUrl+'xiaiangdad.png'" mode="aspectFill"
															class="shangsfhasd">
														</image>
														<view class="shuzi">
															{{itemss.is_diff_num}}
														</view>
													</view>
												</view>
												<view class="asdadkada_row">
													<view v-for="(item,index) in itemss.total" :key="index">
														<view class="asdadkada_rows">
															{{item.score_title}}<text>{{item.total}}</text>次
														</view>
													</view>
												</view>
											</view>
										</view>
										<view class="yeji_cluiom">
											<view class="yeji_namke">
												{{itemss.score_title == '' || itemss.score_title == undefined ? '暂无' : itemss.score_title}}顾问
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/common/config.js';
	import navigationCustom from "@/components/struggler-navigationCustom/navigation-custom";
	export default {
		components: {
			navigationCustom
		},
		data() {
			return {
				config: {
					title: "星级排行榜详情", //title
					bgcolor: "transparent", //背景颜色
					fontcolor: "#fff", //文字颜色，默认白色
					type: 4, //type 1，3胶囊 2，4无胶囊模式
					transparent: false, //是否背景透明 默认白色
					linear: false, //是为开启下滑渐变
					share: false, //是否将主页按钮显示为分享按钮
					menuIcon: "../../static/icon/fanhui.png", //当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
				},
				imgUrl: config.imgUrl,
				oneindex: 0,
				page: 1,
				giantList: [],
				diyi: null,
				dier: null,
				disan: null,
				cayunList: [],
				typeq: 1,
				dataq: 1,
			}
		},
		onPageScroll(res) {
			var a = this
			if (0 < res.scrollTop <= 40) {
				a.config.bgcolor = 'rgba(253, 238, 238,0)'
			}
			if (40 < res.scrollTop <= 120) {
				a.config.bgcolor = 'rgba(253, 238, 238, 0.2)'
				a.config.menuIcon = '../../static/icon/fanhui.png'
				a.config.title = '星级排行榜详情'
				a.config.fontcolor = '#fff'
			}
			if (60 < res.scrollTop <= 220) {
				a.config.bgcolor = 'rgba(253, 238, 238, 0.4)'
				a.config.menuIcon = '../../static/icon/back2.png'
				a.config.title = '星级排行榜详情'
				a.config.fontcolor = '#000'
			}
			if (res.scrollTop > 220) {
				a.config.bgcolor = 'rgba(253, 238, 238, 1)'
				a.config.menuIcon = '../../static/icon/back2.png'
				a.config.title = '星级排行榜详情'
				a.config.fontcolor = '#000'
			}
			if (res.scrollTop == 0) {
				a.config.bgcolor = 'rgba(253, 238, 238, 0)'
				a.config.menuIcon = '../../static/icon/fanhui.png'
				a.config.title = '星级排行榜详情'
				a.config.fontcolor = '#fff'
			}
		},
		onLoad(option) {
			let _this = this;
			_this.typeq = JSON.parse(option.id).tyoe
			var indexs =  JSON.parse(option.id).index
			_this.getonetob(indexs)
		},
		onPullDownRefresh() {
			var that = this
			that.page = 1,
				that.giantList = [],
				that.diyi = null,
				that.dier = null,
				that.disan = null,
				that.cayunList = []
			that.getranking()
		},
		onReachBottom() {
			var that = this
			that.page++;
			that.getranking()
		},
		methods: {
			//查询v排行榜
			async getranking() {
				var that = this;
				let data = await that.$api.getranking({
					type: that.typeq,
					data: that.dataq,
					page: that.page
				});
				uni.stopPullDownRefresh()
				if (data.code == 1) {
					that.giantList = [...that.giantList, ...data.data.data]
					if (that.giantList.length == 1) {
						that.diyi = that.giantList[0]
					}
					if (that.giantList.length == 2) {
						that.diyi = that.giantList[0]
						that.dier = that.giantList[1]
					}
					if (that.giantList.length == 3) {
						that.diyi = that.giantList[0]
						that.dier = that.giantList[1]
						that.disan = that.giantList[2]
					}
					if (that.giantList.length > 3) {
						that.diyi = that.giantList[0]
						that.dier = that.giantList[1]
						that.disan = that.giantList[2]
						const newList = that.giantList.slice(3);
						that.cayunList = newList
					}
				} else {
					uni.showToast({
						title: data.msg,
						icon: "none"
					})
				}
			},
			//切换
			getonetob(e) {
				this.oneindex = e
				if (e == 0) {
					this.dataq = 1
					this.page = 1,
						this.giantList = [],
						this.diyi = null,
						this.dier = null,
						this.disan = null,
						this.cayunList = []
					this.getranking()
				} else if (e == 1) {
					this.dataq = 2
					this.page = 1,
						this.giantList = [],
						this.diyi = null,
						this.dier = null,
						this.disan = null,
						this.cayunList = []
					this.getranking()
				} else if (e == 2) {
					this.dataq = 3
					this.page = 1,
						this.giantList = [],
						this.diyi = null,
						this.dier = null,
						this.disan = null,
						this.cayunList = []
					this.getranking()
				}
			},
			// 返回上一页
			customConduct() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss">
	.frame {
		width: 100%;
		min-height: 100vh;
		position: relative;
		background-color: #F5F7FB !important;

		.top_nav_box {
			top: 0;
			left: 0;
			z-index: 99;
		}

		.content_hadrimg {
			width: 750rpx;
			height: 744rpx;
			position: absolute;
			top: 0;
		}

		image {
			width: 100%;
			height: 100%;
		}

		.sadagfaadas {
			width: 702rpx;
			margin-left: 24rpx;
			position: relative;
			margin-top: -550rpx;
		}

		.sadadada {
			width: 702rpx;
			height: 444rpx;
		}

		.asndaisasfa {
			position: absolute;
			top: 26rpx;
			left: 0;
		}

		.asdsda {
			width: 702rpx;
			height: 209rpx;
			position: absolute;
			background-color: #fff;
			top: 439rpx;
			left: 0;
		}

		.asdsdas {
			width: 702rpx;
			height: 209rpx;
			position: absolute;
			background-color: #fff;
			top: 439rpx;
			left: 0;
			border-bottom-right-radius: 40rpx;
			border-bottom-left-radius: 40rpx;
		}

		.assfasfas {
			width: 702rpx;
			background-color: #fff;
			border-bottom-right-radius: 40rpx;
			border-bottom-left-radius: 40rpx;
			padding-bottom: 30rpx;
			box-sizing: border-box;
		}

		.namrdadadad {
			font-size: 36rpx;
			font-weight: bold;
			color: #FFFFFF;
			margin-left: 95rpx;
		}

		.tabbangdan {
			width: 638rpx;
			height: 72rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			border-radius: 12rpx;
			background: rgba(222, 34, 33, 0.07);
			margin-top: 50rpx;
			margin-left: 24rpx;

			.yuebang {
				width: 210rpx;
				height: 64rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				border-radius: 12rpx;
				background: #FFFFFF;
				font-size: 30rpx;
				font-weight: bold;
				color: #DE2221;
			}

			.yuebangs {
				width: 210rpx;
				height: 64rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				border-radius: 12rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #08112C;
			}
		}
	}

	.bangdansd {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-left: 52rpx;
		margin-top: 44rpx;

		.onessd {
			position: relative;

	.touxiang {
				position: absolute;
				top: 21rpx;
				left: 47rpx;
			}

			.touxiangs {
				position: absolute;
				top: 22rpx;
				left: 47rpx;
			}

			.touxiaada {
				position: absolute;
				top: 22rpx;
				left: 47rpx;
			}

			.touxiagsdass {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}


			.cehsitouxi {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}

			.biaotid {
				width: 88rpx;
				height: 40rpx;
			}
		}

		.jinn {
			width: 200rpx;
			height: 368rpx;
		}

		.jinns {
			width: 200rpx;
			height: 320rpx;
		}

		.jinnss {
			width: 200rpx;
			height: 340rpx;
		}

		.name {
			font-size: 24rpx;
			color: #08112C;
			margin-top: 15rpx;
		}

		.yejias {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 2rpx 8rpx;
			border-radius: 6rpx;
			background: rgba(41, 87, 155, 0.05);
			font-size: 20rpx;
			text-align: center;
			color: #08112C;

			text {
				font-size: 20rpx;
				color: #F94141;
			}

			margin-top: 6rpx;
		}

		.yejiass {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 2rpx 8rpx;
			border-radius: 6rpx;
			background: rgba(255, 178, 0, 0.1);
			font-size: 20rpx;
			text-align: center;
			color: #08112C;

			text {
				font-size: 20rpx;
				color: #F94141;
			}

			margin-top: 6rpx;
		}

		.yejiasss {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 2rpx 8rpx;
			border-radius: 6rpx;
			background: rgba(222, 34, 33, 0.07);
			font-size: 20rpx;
			text-align: center;
			color: #08112C;

			text {
				font-size: 20rpx;
				color: #F94141;
			}

			margin-top: 6rpx;
		}


		.yeji {
			font-size: 28rpx;
			font-weight: bold;
			color: #C00A09;
			margin-top: 100rpx;
		}
	}

	.asdasasadasda {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.bangdan {
		margin-top: 20rpx;
		margin-left: 24rpx;
	}

	.bangdans {
		margin-top: 30rpx;
		margin-left: 24rpx;
	}

	.shujusda {
		width: 646rpx;
		height: 112rpx;
		border-radius: 16rpx;
		box-sizing: border-box;
		background-image: url('https://star.googom.cn/image/kasmdada.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	.shujusdas {
		width: 646rpx;
		height: 112rpx;
		border-radius: 16rpx;
		background-image: url('https://star.googom.cn/image/wodadada.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	.aasdadadasdad {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		.banagba_cloumn {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;

			.banagba_clyio {
				font-family: 'PingFang SC';
				font-size: 14rpx;
				font-weight: bold;
				color: #64350C;
			}

			.banagba_clyios {
				font-size: 30rpx;
				font-weight: bold;
				color: #64350C;
			}
		}

		.tsasdad {
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
			border-radius: 398rpx;
			box-sizing: border-box;
			border: 2.6rpx solid #F7B57A;
			margin-left: 32rpx;
		}

		.asdadkada {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
		}

		.asdadkada_row {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			margin-top: 8rpx;
		}

		.asdadkada_rows {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 2rpx 8rpx;
			border-radius: 6rpx;
			background: rgba(222, 34, 33, 0.05);
			font-size: 20rpx;
			text-align: center;
			color: #08112C;
			margin-left: 16rpx;

			text {
				color: #F94141;
			}
		}

		.baname {
			margin-left: 16rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #64350C;
		}

		.basdadf {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin-left: 16rpx;

			.shangsfhasd {
				width: 28rpx;
				height: 28rpx;
			}

			.shuzi {
				font-size: 28rpx;
				font-weight: bold;
				color: #DE2221;
			}
		}
	}

	.yeji_cluiom {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-end;
		margin-right: 20rpx;

		.yeji_namke {
			font-size: 28rpx;
			font-weight: bold;
			color: #F94141;
		}
		
		.yeji_pices {
			font-size: 28rpx;
			font-weight: bold;
			color: #08112C;
		}
	}

	.dianujcas {
		width: 176rpx;
		height: 272rpx;
	}

	.csadasdacasc {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx;

		.ca_name {
			font-size: 30rpx;
			font-weight: bold;
			color: #A50C0E;
			margin-left: 50rpx;
		}

		.chakndda {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.asdadadad {
		position: absolute;
		top: 21rpx;
		left: 55rpx;
	}

	.asdasasadasda {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.asasdsdasc {
		position: absolute;
		top: 22rpx;
		left: 55rpx;
	}

	.sadadadadadadada {
		position: absolute;
		top: 22rpx;
		left: 55rpx;
	}
	.assfasfas {
		width: 702rpx;
		background-color: #fff;
		border-bottom-right-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
		padding-bottom: 30rpx;
		box-sizing: border-box;
		margin-bottom: 100rpx;
	}
</style>